<script setup lang="ts">
import { ref } from 'vue';

const phone = ref('13211112222')
const dealInput = (e: Event) => {
  // console.log((e.target as HTMLInputElement).value);
  phone.value = (e.target as HTMLInputElement).value
}

const gender = ref('女')
const changeGender = (e: Event) => {
  // console.log(e);
  gender.value = (e.target as HTMLInputElement).value
}


const hobbies = ref(['看书'])

const city = ref('上京')
</script>

<template>
  <div style="padding: 20px;background-color: gray;">
    <!-- 1. v-model在输入框中的使用 -->
    <!-- 等价于 :value + @input -->
    <!-- <input type="text" v-model="phone"> -->
    <input type="text" :value="phone" @input="dealInput">
  </div>

  <!-- 2.  v-model在单选和多选标签上 等价于 :checked + @change -->
  <div style="padding: 20px;background-color: gray; margin-top: 20px;">
    <span>性别:</span>
    <!-- 
    <input v-model="gender" name="gender" value="男" type="radio">男
    <input v-model="gender" name="gender" value="女" type="radio">女 
    -->
    <input name="gender" value="男" :checked="gender === '男'" type="radio" @change="changeGender">男
    <input name="gender" value="女" :checked="gender === '女'" type="radio" @change="changeGender">女
  </div>

  <!-- 3. v-model在多选标签上 等价于 :checked + @change -->
  <div style="padding: 20px;background-color: gray; margin-top: 20px;">
    <span>爱好:</span>
    <input v-model="hobbies" name="hobby" type="checkbox" value="看书">看书
    <input v-model="hobbies" name="hobby" type="checkbox" value="打球">打球
    <input v-model="hobbies" name="hobby" type="checkbox" value="爬山">爬山
    <div>用户的爱好是: {{ hobbies }}</div>
  </div>

  <!-- 4. v-model在下拉框中选择 -->
  <div style="padding: 20px;background-color: gray; margin-top: 20px;">
    <span>选择喜欢的城市:</span>
    <select name="city" v-model="city">
      <option value="北京">北京</option>
      <option value="南京">南京</option>
      <option value="东京">东京</option>
      <option value="上京">上京</option>
    </select>
    <div>用户喜欢的城市是: {{ city }}</div>
  </div>
</template>

<style scoped></style>
